
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mega Able bootstrap admin template by Phoenixcoded</title>



<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Gradient Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
<meta name="keywords" content="flat ui, admin Admin , Responsive, Landing, Bootstrap, App, Template, Mobile, iOS, Android, apple, creative app">
<meta name="author" content="Phoenixcoded" />

<link rel="icon" href="../files/assets/images/favicon.ico" type="image/x-icon">

<link rel="stylesheet" type="text/css" href="../files/bower_components/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="../files/assets/pages/waves/css/waves.min.css" type="text/css" media="all">

<link rel="stylesheet" type="text/css" href="../files/assets/icon/themify-icons/themify-icons.css">

<link rel="stylesheet" type="text/css" href="../files/assets/icon/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="../files/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="../files/assets/css/jquery.mCustomScrollbar.css">
</head>
<body>

<div class="theme-loader">
<div class="loader-track">
<div class="preloader-wrapper">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>

<div id="pcoded" class="pcoded">
<div class="pcoded-overlay-box"></div>
<div class="pcoded-container navbar-wrapper">
<nav class="navbar header-navbar pcoded-header">
<div class="navbar-wrapper">
<div class="navbar-logo">
<a class="mobile-menu waves-effect waves-light" id="mobile-collapse" href="#!">
<i class="ti-menu"></i>
</a>
<div class="mobile-search waves-effect waves-light">
<div class="header-search">
<div class="main-search morphsearch-search">
<div class="input-group">
<span class="input-group-prepend search-close"><i class="ti-close input-group-text"></i></span>
<input type="text" class="form-control" placeholder="Enter Keyword">
<span class="input-group-append search-btn"><i class="ti-search input-group-text"></i></span>
</div>
</div>
</div>
</div>
<a href="index.html">
<img class="img-fluid" src="../files/assets/images/logo.png" alt="Theme-Logo" />
</a>
<a class="mobile-options waves-effect waves-light">
<i class="ti-more"></i>
</a>
</div>
<div class="navbar-container container-fluid">
<ul class="nav-left">
<li>
<div class="sidebar_toggle"><a href="javascript:void(0)"><i class="ti-menu"></i></a></div>
</li>
<li class="header-search">
<div class="main-search morphsearch-search">
<div class="input-group">
<span class="input-group-prepend search-close"><i class="ti-close input-group-text"></i></span>
<input type="text" class="form-control" placeholder="Enter Keyword">
<span class="input-group-append search-btn"><i class="ti-search input-group-text"></i></span>
</div>
</div>
</li>
<li>
<a href="#!" onclick="javascript:toggleFullScreen()" class="waves-effect waves-light">
<i class="ti-fullscreen"></i>
</a>
</li>
</ul>
<ul class="nav-right">
<li class="header-notification">
<a href="#!" class="waves-effect waves-light">
<i class="ti-bell"></i>
<span class="badge bg-c-red"></span>
</a>
<ul class="show-notification">
<li>
<h6>Notifications</h6>
<label class="label label-danger">New</label>
</li>
<li class="waves-effect waves-light">
<div class="media">
<img class="d-flex align-self-center img-radius" src="../files/assets/images/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">John Doe</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
<li class="waves-effect waves-light">
<div class="media">
<img class="d-flex align-self-center img-radius" src="../files/assets/images/avatar-4.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Joseph William</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
<li class="waves-effect waves-light">
<div class="media">
<img class="d-flex align-self-center img-radius" src="../files/assets/images/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Sara Soudein</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
</ul>
</li>
<li class="">
<a href="#!" class="displayChatbox waves-effect waves-light">
<i class="ti-comments"></i>
<span class="badge bg-c-green"></span>
</a>
</li>
<li class="user-profile header-notification">
<a href="#!" class="waves-effect waves-light">
<img src="../files/assets/images/avatar-4.jpg" class="img-radius" alt="User-Profile-Image">
<span>John Doe</span>
<i class="ti-angle-down"></i>
</a>
<ul class="show-notification profile-notification">
<li class="waves-effect waves-light">
<a href="#!">
<i class="ti-settings"></i> Settings
</a>
</li>
<li class="waves-effect waves-light">
<a href="user-profile.html">
<i class="ti-user"></i> Profile
</a>
</li>
<li class="waves-effect waves-light">
<a href="email-inbox.html">
<i class="ti-email"></i> My Messages
 </a>
</li>
<li class="waves-effect waves-light">
<a href="auth-lock-screen.html">
<i class="ti-lock"></i> Lock Screen
</a>
</li>
<li class="waves-effect waves-light">
<a href="auth-normal-sign-in.html">
<i class="ti-layout-sidebar-left"></i> Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

<div id="sidebar" class="users p-chat-user showChat">
<div class="had-container">
<div class="card card_main p-fixed users-main">
<div class="user-box">
<div class="chat-search-box">
<a class="back_friendlist">
<i class="fa fa-chevron-left"></i>
</a>
<div class="right-icon-control">
<form class="form-material">
<div class="form-group form-primary">
<input type="text" name="footer-email" class="form-control" id="search-friends" required="">
<span class="form-bar"></span>
<label class="float-label"><i class="fa fa-search m-r-10"></i>Search Friend</label>
</div>
</form>
</div>
</div>
<div class="main-friend-list">
<div class="media userlist-box waves-effect waves-light" data-id="1" data-status="online" data-username="Josephin Doe" data-toggle="tooltip" data-placement="left" title="Josephin Doe">
<a class="media-left" href="#!">
<img class="media-object img-radius img-radius" src="../files/assets/images/avatar-3.jpg" alt="Generic placeholder image ">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Josephin Doe</div>
</div>
</div>
<div class="media userlist-box waves-effect waves-light" data-id="2" data-status="online" data-username="Lary Doe" data-toggle="tooltip" data-placement="left" title="Lary Doe">
<a class="media-left" href="#!">
<img class="media-object img-radius" src="../files/assets/images/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Lary Doe</div>
</div>
</div>
<div class="media userlist-box waves-effect waves-light" data-id="3" data-status="online" data-username="Alice" data-toggle="tooltip" data-placement="left" title="Alice">
<a class="media-left" href="#!">
 <img class="media-object img-radius" src="../files/assets/images/avatar-4.jpg" alt="Generic placeholder image">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Alice</div>
</div>
</div>
<div class="media userlist-box waves-effect waves-light" data-id="4" data-status="online" data-username="Alia" data-toggle="tooltip" data-placement="left" title="Alia">
<a class="media-left" href="#!">
<img class="media-object img-radius" src="../files/assets/images/avatar-3.jpg" alt="Generic placeholder image">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Alia</div>
</div>
</div>
<div class="media userlist-box waves-effect waves-light" data-id="5" data-status="online" data-username="Suzen" data-toggle="tooltip" data-placement="left" title="Suzen">
<a class="media-left" href="#!">
<img class="media-object img-radius" src="../files/assets/images/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status bg-success"></div>
</a>
<div class="media-body">
<div class="f-13 chat-header">Suzen</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="showChat_inner">
<div class="media chat-inner-header">
<a class="back_chatBox">
<i class="fa fa-chevron-left"></i> Josephin Doe
</a>
</div>
<div class="media chat-messages">
<a class="media-left photo-table" href="#!">
<img class="media-object img-radius img-radius m-t-5" src="../files/assets/images/avatar-3.jpg" alt="Generic placeholder image">
</a>
<div class="media-body chat-menu-content">
<div class="">
<p class="chat-cont">I'm just looking around. Will you tell me something about yourself?</p>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
</div>
<div class="media chat-messages">
<div class="media-body chat-menu-reply">
<div class="">
<p class="chat-cont">I'm just looking around. Will you tell me something about yourself?</p>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
<div class="media-right photo-table">
<a href="#!">
<img class="media-object img-radius img-radius m-t-5" src="../files/assets/images/avatar-4.jpg" alt="Generic placeholder image">
</a>
</div>
</div>
<div class="chat-reply-box">
<div class="right-icon-control">
<form class="form-material">
<div class="form-group form-primary">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label"><i class="fa fa-search m-r-10"></i>Share Your Thoughts</label>
</div>
</form>
<div class="form-icon ">
<button class="btn btn-success btn-icon  waves-effect waves-light">
<i class="fa fa-paper-plane "></i>
</button>
</div>
</div>
</div>
</div>

<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<nav class="pcoded-navbar">
<div class="sidebar_toggle"><a href="#"><i class="icon-close icons"></i></a></div>
<div class="pcoded-inner-navbar main-menu">
<div class="">
<div class="main-menu-header">
<img class="img-80 img-radius" src="../files/assets/images/avatar-4.jpg" alt="User-Profile-Image">
<div class="user-details">
<span id="more-details">John Doe<i class="fa fa-caret-down"></i></span>
</div>
</div>
<div class="main-menu-content">
<ul>
<li class="more-details">
<a href="user-profile.html"><i class="ti-user"></i>View Profile</a>
<a href="#!"><i class="ti-settings"></i>Settings</a>
<a href="auth-normal-sign-in.html"><i class="ti-layout-sidebar-left"></i>Logout</a>
</li>
</ul>
</div>
</div>
<div class="p-15 p-b-0">
<form class="form-material">
<div class="form-group form-primary">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label"><i class="fa fa-search m-r-10"></i>Search Friend</label>
</div>
</form>
</div>
<div class="pcoded-navigation-label">Navigation</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-home"></i><b>D</b></span>
<span class="pcoded-mtext">Dashboard</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="index.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Default</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="dashboard-ecommerce.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ecommerce</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="dashboard-crm.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">CRM</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dashboard-analytics.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Analytics</span>
<span class="pcoded-badge label label-info ">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dashboard-project.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Project</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout"></i><b>P</b></span>
<span class="pcoded-mtext">Page layouts</span>
<span class="pcoded-badge label label-warning">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
 <ul class="pcoded-submenu">
<li class=" pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">Vertical</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="menu-static.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Static Layout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-header-fixed.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Header Fixed</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-compact.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Compact</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-sidebar.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Sidebar Fixed</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">Horizontal</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="menu-horizontal-static.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
 <span class="pcoded-mtext">Static Layout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-horizontal-fixed.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Fixed layout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-horizontal-icon.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Static With Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-horizontal-icon-fixed.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-chart"></i></span>
<span class="pcoded-mtext">Fixed With Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="menu-bottom.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">Bottom Menu</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="box-layout.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">Box Layout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="menu-rtl.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="icon-pie-chart"></i></span>
<span class="pcoded-mtext">RTL</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
 <a href="navbar-light.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-cta-right"></i><b>N</b></span>
<span class="pcoded-mtext">Navigation</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-view-grid"></i><b>W</b></span>
<span class="pcoded-mtext">Widget</span>
<span class="pcoded-badge label label-danger">100+</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="widget-statistic.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Statistic</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="widget-data.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Data</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="widget-chart.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Chart Widget</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="widget-chart-advance.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Advance Widgets</span>
<span class="pcoded-badge label label-info">25+</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">UI Element</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i><b>BC</b></span>
<span class="pcoded-mtext">Basic</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="alert.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Alert</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="breadcrumb.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Breadcrumbs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="button.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Button</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="box-shadow.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Box-Shadow</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="accordion.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Accordion</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="generic-class.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Generic Class</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tabs.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tabs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="color.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Color</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="label-badge.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Label Badge</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="progress-bar.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Progress Bar</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="preloader.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Pre-Loader</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tooltip.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tooltip And Popover</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="typography.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Typography</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="other.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Other</span>
 <span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-crown"></i><b>AC</b></span>
<span class="pcoded-mtext">Advance</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="draggable.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Draggable</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="bs-grid.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Grid Stack</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="light-box.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Light Box</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="modal.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Modal</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="notification.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Notifications</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="notify.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">PNOTIFY</span>
<span class="pcoded-badge label label-info">NEW</span>
<span class="pcoded-mcaret"></span>
 </a>
</li>
<li class=" ">
<a href="rating.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Rating</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="range-slider.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Range Slider</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="slider.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Slider</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="syntax-highlighter.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Syntax Highlighter</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tour.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tour</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="treeview.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tree View</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="nestable.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Nestable</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="toolbar.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Toolbar</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="x-editable.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">X-Editable</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-gift"></i><b>EC</b></span>
<span class="pcoded-mtext">Extra</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="session-timeout.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Session Timeout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="session-idle-timeout.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Session Idle Timeout</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="offline.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Offline</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="animation.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-reload rotate-refresh"></i><b>A</b></span>
<span class="pcoded-mtext">Animations</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="sticky.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layers-alt"></i><b>S</b></span>
<span class="pcoded-mtext">Sticky Notes</span>
<span class="pcoded-badge label label-danger">HOT</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-star"></i><b>I</b></span>
<span class="pcoded-mtext">Icons</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="icon-font-awesome.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Font Awesome</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-themify.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Themify</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-simple-line.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Simple Line Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-ion.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ion Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-material-design.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Material Design</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-icofonts.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ico Fonts</span>
<span class="pcoded-mcaret"></span>
</a>
 </li>
<li class=" ">
<a href="icon-weather.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Weather Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-typicons.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Typicons</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-flags.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Flags</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">Forms</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext">Form</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="form-elements-component.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Components</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-elements-add-on.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Add-On</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-elements-advance.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Advance</span>
<span class="pcoded-mcaret"></span>
 </a>
</li>
<li class=" ">
<a href="form-validation.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Validation</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="form-picker.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-pencil-alt"></i><b>FP</b></span>
<span class="pcoded-mtext">Form Picker</span>
<span class="pcoded-badge label label-warning">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-select.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-shortcode"></i><b>FS</b></span>
<span class="pcoded-mtext">Form Select</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-masking.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-write"></i><b>FM</b></span>
<span class="pcoded-mtext">Form Masking</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="form-wizard.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-archive"></i><b>F</b></span>
<span class="pcoded-mtext">Form Wizard</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-receipt"></i><b>R</b></span>
<span class="pcoded-mtext">Ready To Use</span>
<span class="pcoded-badge label label-danger">HOT</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="ready-cloned-elements-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Cloned Elements Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
 <a href="ready-currency-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Currency Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-form-booking.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Booking Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-form-booking-multi-steps.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Booking Multi Steps</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-form-comment.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Comment Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-form-contact.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Contact Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-job-application-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Job Application Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-js-addition-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">JS Addition Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-login-form.html" class="waves-effect waves-dark">
 <span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Login Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-popup-modal-form.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Popup Modal Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-registration-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Registration Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-review-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Review Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-subscribe-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Subscribe Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-suggestion-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Suggestion Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="ready-tabs-form.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Tabs Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">Tables</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu">
 <a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-receipt"></i><b>B</b></span>
<span class="pcoded-mtext">Bootstrap Table</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="bs-basic-table.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Basic Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="bs-table-sizing.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Sizing Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="bs-table-border.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Border Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="bs-table-styling.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Styling Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-widgetized"></i><b>DT</b></span>
<span class="pcoded-mtext">Data Table</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="dt-basic.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Basic Initialization</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-advance.html" class="waves-effect waves-dark">
 <span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Advance Initialization</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-styling.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Styling</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-api.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">API</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ajax.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ajax</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-server-side.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Server Side</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-plugin.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Plug-In</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-data-sources.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Data Sources</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-loop"></i><b>D</b></span>
<span class="pcoded-mtext">DT Extensions</span>
 <span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="dt-ext-autofill.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">AutoFill</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Button</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="dt-ext-basic-buttons.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Basic Button</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-buttons-html-5-data-export.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Data Export</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="dt-ext-col-reorder.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Col Reorder</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-fixed-columns.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Fixed Columns</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-fixed-header.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
 <span class="pcoded-mtext">Fixed Header</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-key-table.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Key Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-responsive.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Responsive</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-row-reorder.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Row Reorder</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-scroller.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Scroller</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="dt-ext-select.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Select Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class=" ">
<a href="foo-table.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-view-list-alt"></i><b>F</b></span>
<span class="pcoded-mtext">FooTable</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-view-list"></i><b>HT</b></span>
<span class="pcoded-mtext">Handson Table</span>
<span class="pcoded-mcaret"></span>
</a>
 <ul class="pcoded-submenu">
<li class="">
<a href="handson-appearance.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Appearance</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-data-operation.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Data Operation</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-rows-cols.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Rows Columns</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-columns-only.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Columns Only</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-cell-features.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Cell Features</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-cell-types.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Cell Types</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-integrations.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Integrations</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-rows-only.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Rows Only</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="handson-utilities.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Utilities</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="editable-table.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-write"></i><b>E</b></span>
<span class="pcoded-mtext">Editable Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigation-label">Chart And Maps</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-bar-chart-alt"></i><b>C</b></span>
<span class="pcoded-mtext">Charts</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="chart-google.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Google Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-echart.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Echarts</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-chartjs.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">ChartJs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">List Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-float.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Float Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-knob.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Knob chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-morris.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Morris Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-nvd3.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Nvd3 Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-peity.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Peity Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-radial.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Radial Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-rickshaw.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Rickshaw Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-sparkline.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Sparkline Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="chart-c3.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">C3 Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-map-alt"></i><b>M</b></span>
<span class="pcoded-mtext">Maps</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="map-google.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Google Maps</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="map-vector.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Vector Maps</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="map-api.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Google Map Search API</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="location.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Location</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="../files/extra-pages/landingpage/index.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-mobile"></i><b>LP</b></span>
<span class="pcoded-mtext">Landing Page</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigation-label">Pages</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-id-badge"></i><b>A</b></span>
<span class="pcoded-mtext">Authentication</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Login</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="auth-normal-sign-in.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Simple</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-normal-sign-in-header-footer.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Header &amp; Footer</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-sign-in-social.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Social</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-sign-in-social-header-footer.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Social With Header &amp; Footer</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Registration</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="auth-sign-up.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Simple</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-sign-up-header-footer.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Header &amp; Footer</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-sign-up-social.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Social</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
 <a href="auth-sign-up-social-header-footer.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Social With Header &amp; Footer</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="auth-multi-step-sign-up.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Multi Step Registration</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-reset-password.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Forgot Password</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-lock-screen.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Lock Screen</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="auth-modal.html" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Modal</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-settings"></i><b>M</b></span>
<span class="pcoded-mtext">Maintenance</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="error.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Error</span>
<span class="pcoded-mcaret"></span>
</a>
 </li>
<li class="">
<a href="comming-soon.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Comming Soon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="offline-ui.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Offline UI</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-user"></i><b>UP</b></span>
<span class="pcoded-mtext">User Profile</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="timeline.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Timeline</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="timeline-social.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Timeline Social</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="user-profile.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">User Profile</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="user-card.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">User Card</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-shopping-cart"></i><b>E</b></span>
<span class="pcoded-mtext">E-Commerce</span>
<span class="pcoded-badge label label-danger">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="product.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-edit.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product Edit</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-detail.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product Detail</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-cart.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Product Card</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="product-payment.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Credit Card Form</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-email"></i><b>E</b></span>
<span class="pcoded-mtext">Email</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="email-compose.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Compose Email</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="email-inbox.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Inbox</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="email-read.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Read Mail</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-email"></i></span>
<span class="pcoded-mtext">Email Template</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="../files/extra-pages/email-templates/email-welcome.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Welcome Email</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="../files/extra-pages/email-templates/email-password.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Reset Password</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="../files/extra-pages/email-templates/email-newsletter.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Newsletter Email</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="../files/extra-pages/email-templates/email-launch.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">App Launch</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="../files/extra-pages/email-templates/email-activation.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Activation Code</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">App</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-dribbble"></i><b>S</b></span>
<span class="pcoded-mtext">Social</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="fb-wall.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Wall</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="message.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Messages</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-check-box"></i><b>T</b></span>
<span class="pcoded-mtext">Task</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="task-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Task List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="task-board.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Task Board</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="task-detail.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Task Detail</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="issue-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Issue List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-notepad"></i><b>T</b></span>
<span class="pcoded-mtext">To-Do</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="todo.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">To-Do</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="notes.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Notes</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-gallery"></i><b>G</b></span>
<span class="pcoded-mtext">Gallery</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="gallery-grid.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Gallery-Grid</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="gallery-masonry.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Masonry Gallery</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="gallery-advance.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Advance Gallery</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-search"></i><b>S</b></span>
<span class="pcoded-mtext">Search</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="search-result.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Simple Search</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="search-result2.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Grouping Search</span>
<span class="pcoded-mcaret"></span>
</a>
 </li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-medall-alt"></i><b>JS</b></span>
<span class="pcoded-mtext">Job Search</span>
<span class="pcoded-badge label label-danger">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="job-card-view.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Card View</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="job-details.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Job Detailed</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="job-find.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Job Find</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="job-panel-view.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Job Panel View</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigation-label">Extension</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-pencil-alt"></i><b>E</b></span>
<span class="pcoded-mtext">Editor</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="ck-editor.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
 <span class="pcoded-mtext">CK-Editor</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="wysiwyg-editor.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">WYSIWYG Editor</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="ace-editor.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Ace Editor</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="long-press-editor.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Long Press Editor</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-media-right"></i><b>I</b></span>
<span class="pcoded-mtext">Invoice</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="invoice.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Invoice</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="invoice-summary.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Invoice Summary</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="invoice-list.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Invoice List</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-calendar"></i><b>EC</b></span>
<span class="pcoded-mtext">Event Calendar</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="event-full-calender.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Full Calendar</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="event-clndr.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">CLNDER</span>
<span class="pcoded-badge label label-info">NEW</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="image-crop.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-cut"></i><b>IC</b></span>
<span class="pcoded-mtext">Image Cropper</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="file-upload.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-cloud-up"></i><b>FU</b></span>
<span class="pcoded-mtext">File Upload</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="change-loges.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-list"></i><b>CL</b></span>
<span class="pcoded-mtext">Change Loges</span>
<span class="pcoded-badge label label-warning">1.0</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigation-label">Other</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-direction-alt"></i><b>M</b></span>
 <span class="pcoded-mtext">Menu Levels</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Menu Level 2.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-direction-alt"></i></span>
<span class="pcoded-mtext">Menu Level 2.2</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-direction-alt"></i></span>
<span class="pcoded-mtext">Menu Level 3.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:void(0)" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext">Menu Level 2.3</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:void(0)" class="disabled waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-na"></i><b>D</b></span>
<span class="pcoded-mtext">Disabled Menu</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="active">
<a href="sample-page.html" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-sidebar-left"></i><b>S</b></span>
<span class="pcoded-mtext">Sample Page</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigation-label">Support</div>
<ul class="pcoded-item pcoded-left-item">
<li class="">
<a href="#" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-file"></i><b>D</b></span>
<span class="pcoded-mtext">Documentation</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="">
<a href="#" target="_blank" class="waves-effect waves-dark">
<span class="pcoded-micon"><i class="ti-layout-list-post"></i><b>SI</b></span>
<span class="pcoded-mtext">Need Support ?</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</div>
</nav>
<div class="pcoded-content">

<div class="page-header">
<div class="page-block">
<div class="row align-items-center">
<div class="col-md-8">
<div class="page-header-title">
<h5 class="m-b-10">Sample Page</h5>
<p class="m-b-0">Lorem Ipsum is simply dummy text of the printing</p>
</div>
</div>
<div class="col-md-4">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html"> <i class="fa fa-home"></i> </a>
</li>
<li class="breadcrumb-item"><a href="#!">Pages</a>
</li>
<li class="breadcrumb-item"><a href="#!">Sample Page</a>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="pcoded-inner-content">
<div class="main-body">
<div class="page-wrapper">
<div class="page-body">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Hello card</h5>
<span>lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
<div class="card-header-right">
<ul class="list-unstyled card-option">
<li><i class="fa fa fa-wrench open-card-option"></i></li>
<li><i class="fa fa-window-maximize full-card"></i></li>
<li><i class="fa fa-minus minimize-card"></i></li>
<li><i class="fa fa-refresh reload-card"></i></li>
<li><i class="fa fa-trash close-card"></i></li>
 </ul>
</div>
</div>
<div class="card-block">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="styleSelector">
</div>
</div>
</div>
</div>
</div>



<script type="text/javascript" src="../files/bower_components/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="../files/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../files/bower_components/popper.js/js/popper.min.js"></script>
<script type="text/javascript" src="../files/bower_components/bootstrap/js/bootstrap.min.js"></script>

<script src="../files/assets/pages/waves/js/waves.min.js"></script>

<script type="text/javascript" src="../files/bower_components/jquery-slimscroll/js/jquery.slimscroll.js"></script>

<script type="text/javascript" src="../files/bower_components/modernizr/js/modernizr.js"></script>
<script type="text/javascript" src="../files/bower_components/modernizr/js/css-scrollbars.js"></script>
<script src="../files/assets/js/pcoded.min.js"></script>
<script src="../files/assets/js/vertical/vertical-layout.min.js"></script>
<script src="../files/assets/js/jquery.mCustomScrollbar.concat.min.js"></script>

<script type="text/javascript" src="../files/assets/js/script.js"></script>
</body>
</html>
